<script setup lang='ts' >
import { onMounted, ref, watch, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const props = defineProps<{
    options: Object
}>()

const myEchartsDf = ref();
let myChart: any = null;
function onResize() {
    myChart && myChart.resize();
    console.log("重新获取页面大小");
}

onMounted(() => {
    myChart = echarts.init(myEchartsDf.value);
    if (!props.options) return;
    myChart && myChart.setOption(props.options);
    window.addEventListener("resize", onResize)
})

watch(
    () => props.options,
    (newVal) => {
        if(newVal){
            myChart && myChart.setOption(newVal);
            onResize()
        }
    },
    { immediate: true, deep: true }
);

onUnmounted(() => {
    myChart.value = null;
    myEchartsDf.value = null;
    window.addEventListener("resize", () => { })
})

</script>
<template>
    <div ref='myEchartsDf' style="width:100%;height: 100%;overflow: hidden;"></div>
</template>